<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文科生学编程 - 从零开始的魔法之旅</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/daisyui/4.12.10/full.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="css/style.css">
</head>
<body class="bg-gradient-to-br from-purple-50 to-blue-50 min-h-screen">
    <!-- 导航栏 -->
    <nav class="navbar bg-white shadow-lg">
        <div class="flex-1">
            <a class="btn btn-ghost normal-case text-xl">
                <i class="fas fa-code text-purple-600 mr-2"></i>
                文科生学编程
            </a>
        </div>
        <div class="flex-none">
            <button class="btn btn-ghost btn-circle">
                <i class="fas fa-trophy text-yellow-500"></i>
            </button>
            <button class="btn btn-ghost btn-circle">
                <div class="indicator">
                    <i class="fas fa-heart text-red-500"></i>
                    <span class="badge badge-xs badge-primary indicator-item">0</span>
                </div>
            </button>
        </div>
    </nav>

    <!-- 欢迎区域 -->
    <section class="hero min-h-screen bg-gradient-to-r from-purple-400 via-pink-500 to-red-500">
        <div class="hero-content text-center text-white">
            <div class="max-w-md">
                <h1 class="text-5xl font-bold mb-6">你好，未来的程序员！</h1>
                <p class="text-xl mb-8">就像写诗一样写代码，让我们一起开始这段魔法之旅</p>
                <button class="btn btn-primary btn-lg" onclick="startJourney()">
                    <i class="fas fa-rocket mr-2"></i>
                    开始冒险
                </button>
            </div>
        </div>
    </section>

    <!-- 闯关地图 -->
    <section id="map-section" class="container mx-auto px-4 py-16 hidden">
        <h2 class="text-3xl font-bold text-center mb-12">你的编程成长树</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <!-- 关卡卡片 -->
            <div class="card bg-base-100 shadow-xl">
                <figure class="px-10 pt-10">
                    <i class="fas fa-seedling text-6xl text-green-500"></i>
                </figure>
                <div class="card-body items-center text-center">
                    <h3 class="card-title">第一关：什么是代码？</h3>
                    <p>就像给机器人写情书，让它按你的意愿行动</p>
                    <div class="card-actions">
                        <button class="btn btn-primary" onclick="openLevel(1)">开始学习</button>
                    </div>
                </div>
            </div>

            <div class="card bg-base-100 shadow-xl">
                <figure class="px-10 pt-10">
                    <i class="fas fa-puzzle-piece text-6xl text-blue-500"></i>
                </figure>
                <div class="card-body items-center text-center">
                    <h3 class="card-title">第二关：变量魔法</h3>
                    <p>给数据起个名字，就像给宠物取名一样简单</p>
                    <div class="card-actions">
                        <button class="btn btn-primary" onclick="openLevel(2)">开始学习</button>
                    </div>
                </div>
            </div>

            <div class="card bg-base-100 shadow-xl">
                <figure class="px-10 pt-10">
                    <i class="fas fa-magic text-6xl text-purple-500"></i>
                </figure>
                <div class="card-body items-center text-center">
                    <h3 class="card-title">第三关：条件判断</h3>
                    <p>如果...那么...就像人生的选择题</p>
                    <div class="card-actions">
                        <button class="btn btn-primary" onclick="openLevel(3)">开始学习</button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 学习区域 -->
    <section id="learning-section" class="container mx-auto px-4 py-16 hidden">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <!-- 左侧：概念解释 -->
            <div class="card bg-base-100 shadow-xl">
                <div class="card-body">
                    <h3 id="concept-title" class="card-title text-2xl mb-4">概念解释</h3>
                    <div id="concept-content" class="prose">
                        <!-- 动态内容 -->
                    </div>
                </div>
            </div>

            <!-- 右侧：互动练习 -->
            <div class="card bg-base-100 shadow-xl">
                <div class="card-body">
                    <h3 class="card-title text-2xl mb-4">互动练习</h3>
                    <div id="interactive-area">
                        <!-- 积木块拖拽区域 -->
                        <div class="mb-4">
                            <h4 class="font-semibold mb-2">拖拽积木块：</h4>
                            <div id="blocks-palette" class="flex flex-wrap gap-2 p-4 bg-gray-100 rounded">
                                <!-- 动态生成积木块 -->
                            </div>
                        </div>
                        
                        <!-- 代码显示区域 -->
                        <div class="mb-4">
                            <h4 class="font-semibold mb-2">你的代码：</h4>
                            <pre id="code-display" class="bg-gray-800 text-white p-4 rounded text-sm"></pre>
                        </div>

                        <!-- 运行按钮 -->
                        <button class="btn btn-success" onclick="runCode()">
                            <i class="fas fa-play mr-2"></i>
                            运行代码
                        </button>

                        <!-- 结果展示 -->
                        <div id="result-display" class="mt-4 p-4 bg-green-50 rounded hidden">
                            <h4 class="font-semibold mb-2">运行结果：</h4>
                            <div id="output"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 返回按钮 -->
        <div class="text-center mt-8">
            <button class="btn btn-ghost" onclick="backToMap()">
                <i class="fas fa-arrow-left mr-2"></i>
                返回地图
            </button>
        </div>
    </section>

    <!-- 成就弹窗 -->
    <dialog id="achievement-modal" class="modal">
        <div class="modal-box">
            <h3 class="font-bold text-lg">恭喜！获得新成就</h3>
            <p class="py-4">你已完成 <span id="achievement-name"></span>！</p>
            <div class="modal-action">
                <form method="dialog">
                    <button class="btn btn-primary">太棒了！</button>
                </form>
            </div>
        </div>
    </dialog>

    <script src="js/main.js"></script>
</body>
</html>
